<template>
    <link rel="stylesheet" href="/assets/css/coupon-info.css" />
    <!-- 顶部标题 -->
    <van-nav-bar
      title="优惠券详情"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    />
  
    <div class="coupon_detail">
      <div class="coupon_info">
        <div class="left">
          <div class="left_top">
            <div>
              <span>{{ couponInfo.rate * 100 }}</span
              >折
            </div>
            <div class="top_info">
              <div>优惠券</div>
              <div>COUPON</div>
            </div>
          </div>
          <div class="left_tips">
            订单满<span>100</span>即享<span>{{ couponInfo.rate * 100 }}</span
            >折
          </div>
        </div>
        <div class="receive">
          <!-- <button class="receive_btn">已领取</button> -->
          <button class="right_btn" @click="receive">立即领取</button>
        </div>
      </div>
      <div class="coupon_prompt">
        <div class="prompt_title">温馨提示：</div>
        <div><span>•</span>每人限领3张</div>
        <div><span>•</span>仅限量{{ couponInfo.total }}张，赶快领取！</div>
        <div>
          <span>•</span>领取后{{ couponInfo.createtime_text }}至{{
            couponInfo.endtime_text
          }}有效
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { getCurrentInstance, onBeforeMount, onMounted, ref } from "vue";
  const { proxy } = getCurrentInstance();
  const businessid = ref("");
  // 获取传递过来的参数
  const id = ref(proxy.$route.query.id);
  // 接收数据
  const couponInfo = ref("");
  
  onMounted(async () => {
    businessid.value = (await proxy.$login()).data.id;
  
    let data = {
      id: id.value,
    };
    let result = await proxy.$post({
      url: "coupon/coupon/info",
      params: data,
    });
    if (result.code === 1) {
      couponInfo.value = result.data;
    } else {
      proxy.$warnNotify(result.msg);
      return false;
    }
  });
  
  // 点击立即领取
  const receive = async function () {
    // 判断当前用户是否登录
    if (!businessid) {
      proxy.$warnNotify({
        message: "请登录后再领取",
      });
      return false;
    } else {
      // 组数据
      let params = {
        // 当前登录用户id
        busid: businessid.value,
        // 优惠券id
        id: id.value,
      };
  
      // 发起请求
      let result = await proxy.$post({
        url: "coupon/coupon/receive",
        params: params,
      });
  
      if (result.code === 1) {
        proxy.$successNotify({
          message: result.msg,
          onClose: () => {
            // 重新刷新一次
            location.reload();
          },
        });
      } else {
        proxy.$warnNotify(result.msg);
        return false;
      }
    }
  };
  // 返回上一级
  const onBack = () => {
    proxy.$router.back();
  };
  </script>